<template>
  <view class="container w-[750rpx] mx-auto">
    <!-- 顶部区域 -->
    <view class="header bg-gradient-to-r from-[#2196F3] to-[#1976D2] text-white p-[30rpx_40rpx_20rpx] sticky top-0 z-100 shadow-[0_4rpx_30rpx_rgba(33,150,243,0.3)] rounded-b-[40rpx]">
      <view class="top-bar flex justify-between items-center">
        <view class="location flex items-center text-[28rpx] font-medium">
          <icon-font name="map-marker-alt" class="mr-[10rpx]" />
          <text>上海市 · 浦东新区</text>
        </view>
        <view class="user-info flex items-center bg-[rgba(255,255,255,0.2)] px-[24rpx] py-[12rpx] rounded-[60rpx] transition-all duration-300 hover:bg-[rgba(255,255,255,0.3)]">
          <view class="avatar w-[80rpx] h-[80rpx] rounded-full bg-gradient-to-r from-[#2196F3] to-[#1976D2] flex items-center justify-center text-white font-bold mr-[20rpx] border-[4rpx] border-solid border-[rgba(255,255,255,0.5)]">
            张
          </view>
          <view class="user-details text-right">
            <text class="nickname text-[28rpx] font-bold">张先生</text>
            <text class="platform-id text-[20rpx] opacity-80 block">ID: 20230001</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-container px-[30rpx] mt-[30rpx]">
      <view class="search-box flex bg-white rounded-[60rpx] px-[40rpx] py-[20rpx] shadow-[0_8rpx_24rpx_rgba(33,150,243,0.15)]">
        <input type="text" placeholder="搜索职位、公司或关键词..." class="flex-1 border-none outline-none text-[28rpx] text-[#263238] px-[20rpx]" />
        <nut-button class="search-btn bg-[#2196F3] text-white rounded-full w-[80rpx] h-[80rpx] flex items-center justify-center transition-all duration-300 hover:bg-[#1976D2] hover:scale-105" @click="performSearch">
          <icon-font name="search" class="text-[36rpx]" />
        </nut-button>
      </view>
    </view>

    <!-- 广告轮播 -->
    <view class="banner mx-[30rpx] mt-[30rpx] rounded-[40rpx] overflow-hidden h-[320rpx] relative shadow-[0_12rpx_30rpx_rgba(33,150,243,0.2)]">
      <view class="banner-content bg-gradient-to-r from-[#4facfe] to-[#2196F3] h-full flex flex-col justify-center pl-[50rpx] pr-[100rpx] text-white relative overflow-hidden">
        <text class="banner-title text-[48rpx] font-bold mb-[16rpx] text-shadow-[0_4rpx_8rpx_rgba(0,0,0,0.2)] relative z-2">{{ currentBanner.title }}</text>
        <text class="banner-subtitle text-[30rpx] opacity-90 max-w-[70%] relative z-2">{{ currentBanner.subtitle }}</text>
        
        <!-- 轮播指示器 -->
        <view class="banner-indicators absolute bottom-[30rpx] left-1/2 transform-translate-x-[-50%] flex z-2">
          <view v-for="(dot, index) in bannerData" :key="index" class="indicator w-[20rpx] h-[20rpx] rounded-full mx-[12rpx] transition-all duration-300" :class="{ 'bg-white w-[50rpx] rounded-[10rpx]': activeBannerIndex === index, 'bg-[rgba(255,255,255,0.5)]': activeBannerIndex !== index }" @click="setActiveBanner(index)"></view>
        </view>
      </view>
    </view>

    <!-- 功能区域标题 -->
    <view class="section-title ml-[40rpx] mt-[50rpx] text-[44rpx] font-bold text-[#263238] flex items-center">
      <text class="w-[10rpx] h-[44rpx] bg-[#2196F3] rounded-[6rpx] mr-[20rpx]"></text>
      核心功能
    </view>

    <!-- 五大功能模块 -->
    <view class="features grid grid-cols-5 gap-[24rpx] px-[30rpx] mt-[20rpx] mb-[40rpx]">
      <view v-for="(feature, index) in features" :key="index" class="feature-card bg-white rounded-[32rpx] px-[16rpx] py-[36rpx] text-center shadow-[0_8rpx_24rpx_rgba(33,150,243,0.1)] transition-all duration-300 hover:translate-y-[-10rpx] hover:shadow-[0_16rpx_40rpx_rgba(33,150,243,0.2)] cursor-pointer" @click="handleFeatureClick(feature)">
        <view class="feature-icon w-[100rpx] h-[100rpx] rounded-full mx-auto mb-[24rpx] flex items-center justify-center text-[48rpx] text-white transition-all duration-300 hover:scale-110" :class="getFeatureIconClass(index)">
          <icon-font :name="feature.icon" class="text-[48rpx]" />
        </view>
        <text class="feature-title text-[28rpx] font-bold mb-[10rpx]">{{ feature.title }}</text>
        <text class="feature-desc text-[24rpx] text-[#546E7A]">{{ feature.desc }}</text>
      </view>
    </view>

    <!-- 悬赏任务区域 -->
    <view class="tasks-section px-[30rpx] mt-[50rpx] mb-[50rpx]">
      <view class="section-header flex justify-between items-center mb-[36rpx]">
        <text class="section-title text-[44rpx] font-bold text-[#263238]">热门悬赏任务</text>
        <text class="view-all text-[30rpx] font-medium text-[#2196F3] flex items-center" @click="viewAllTasks">查看全部 <icon-font name="angle-right" class="ml-[10rpx] transition-all duration-300 group-hover:text-[#1976D2] group-hover:translate-x-[6rpx]" /></text>
      </view>

      <view class="tasks flex flex-col gap-[30rpx]">
        <view v-for="(task, index) in tasks" :key="index" class="task-card bg-white rounded-[36rpx] p-[36rpx] flex shadow-[0_8rpx_30rpx_rgba(33,150,243,0.1)] transition-all duration-300 hover:translate-y-[-6rpx] hover:shadow-[0_16rpx_40rpx_rgba(33,150,243,0.2)] border-l-[8rpx] border-[#2196F3]">
          <view class="task-icon w-[110rpx] h-[110rpx] rounded-[28rpx] bg-[#E3F2FD] flex items-center justify-center mr-[36rpx] text-[#2196F3] text-[48rpx]">
            <icon-font :name="task.icon" class="text-[48rpx]" />
          </view>
          <view class="task-details flex-1">
            <text class="task-title font-bold text-[34rpx] text-[#263238] mb-[16rpx]">{{ task.title }}</text>
            <text class="task-info text-[26rpx] text-[#546E7A] mb-[20rpx] block">{{ task.info }}</text>
            <text class="task-reward text-[40rpx] text-[#FF9800] font-bold mb-[16rpx]">{{ task.reward }}</text>
            <view class="task-tags flex gap-[20rpx] flex-wrap mt-[16rpx]">
              <text v-for="(tag, i) in task.tags" :key="i" class="tag bg-[#E3F2FD] text-[#2196F3] text-[24rpx] px-[24rpx] py-[10rpx] rounded-[40rpx] font-medium" :class="{ 'bg-[#FFF8E1] text-[#FF9800]': tag.highlight }">{{ tag.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 4个板块 -->
    <view class="container px-[30rpx] mb-[120rpx]">
      <view class="section-title ml-[40rpx] mb-[30rpx] text-[44rpx] font-bold text-[#263238]">平台服务</view>
      <view class="nav-row grid grid-cols-2 gap-[24rpx] mt-[10rpx]">
        <view v-for="(item, index) in navItems" :key="index" class="nav-item flex flex-col items-center justify-center bg-white rounded-[32rpx] pt-[36rpx] pb-[30rpx] text-[30rpx] shadow-[0_8rpx_24rpx_rgba(33,150,243,0.1)] transition-all duration-300 cursor-pointer border border-[rgba(33,150,243,0.1)] hover:bg-gradient-to-r from-white to-[#E3F2FD] hover:translate-y-[-10rpx] hover:shadow-[0_16rpx_40rpx_rgba(33,150,243,0.2)]" @click="handleNavItem(item)">
          <text class="nav-emoji text-[64rpx] transition-all duration-300 hover:scale-110">{{ item.emoji }}</text>
          <text class="nav-text text-[30rpx] font-semibold text-[#2196F3] letter-spacing-[1rpx]">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="footer fixed bottom-0 left-0 right-0 max-w-[750rpx] bg-white flex justify-around py-[24rpx] shadow-[0_-8rpx_30rpx_rgba(0,0,0,0.08)] z-100 rounded-tl-[50rpx] rounded-tr-[50rpx]">
      <view v-for="(btn, index) in footerButtons" :key="index" class="footer-btn flex flex-col items-center text-[24rpx]" :class="{ 'text-[#2196F3] bg-[#E3F2FD]': btn.active }" @click="selectFooterBtn(index)">
        <icon-font :name="btn.icon" class="text-[44rpx] mb-[10rpx] transition-all duration-300" :class="{ 'text-[#2196F3] translate-y-[-6rpx]': btn.active || isHovered === index }" @mouseenter="isHovered = index" @mouseleave="isHovered = null" />
        <text>{{ btn.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';

// 当前广告数据
const currentBanner = ref({ title: '', subtitle: '' });
const activeBannerIndex = ref(0);

// 广告内容数据
const bannerData = [
  {
    title: "新用户注册即送200元大礼包",
    subtitle: "海量优质工作机会，快速入职，薪资透明"
  },
  {
    title: "平台认证商家招募中",
    subtitle: "专属流量支持，快速招聘优质人才"
  },
  {
    title: "能力提升课程限时优惠",
    subtitle: "职业考证课程低至5折，名额有限"
  }
];

// 功能模块数据
const features = [
  { icon: 'calendar-day', title: '日结区', desc: '订单制工作' },
  { icon: 'tasks', title: '悬赏区', desc: '任务制工作' },
  { icon: 'chart-line', title: '能力提升', desc: '职业考证/技能培训' },
  { icon: 'building', title: '工厂招聘', desc: '工厂招聘区' },
  { icon: 'star', title: '特殊招聘', desc: '高薪优质岗位' }
];

// 悬赏任务数据
const tasks = [
  {
    icon: 'code',
    title: '小程序开发',
    info: '企业认证 · 需交付成果',
    reward: '¥3,200',
    tags: [
      { text: '5天内完成' },
      { text: '远程工作' },
      { text: '急招', highlight: true }
    ]
  },
  {
    icon: 'paint-brush',
    title: '产品宣传海报设计',
    info: '个人发布 · 需交付源文件',
    reward: '¥1,500',
    tags: [
      { text: '3天内完成' },
      { text: '可议价' }
    ]
  },
  {
    icon: 'video',
    title: '短视频拍摄剪辑',
    info: '企业认证 · 需现场沟通',
    reward: '¥2,800',
    tags: [
      { text: '7天内完成' },
      { text: '上海市' },
      { text: '热门', highlight: true }
    ]
  }
];

// 导航项数据
const navItems = [
  { emoji: '🏪', text: '成为平台商家' },
  { emoji: '🧑‍💼', text: '成为平台从业者' },
  { emoji: 'ℹ️', text: '信息' },
  { emoji: '👋', text: '联系我们' }
];

// 底部按钮数据
const footerButtons = [
  { icon: 'home', label: '接单大厅', active: true },
  { icon: 'tasks', label: '悬赏任务' },
  { icon: 'plus', label: '发布' },
  { icon: 'comment-dots', label: '消息' },
  { icon: 'user', label: '我的' }
];

// 当前悬停的底部按钮索引
const isHovered = ref(null);

// 设置当前广告
const setActiveBanner = (index) => {
  activeBannerIndex.value = index;
  currentBanner.value = bannerData[index];
};

// 初始化广告
onMounted(() => {
  currentBanner.value = bannerData[activeBannerIndex.value];
  startBannerRotation();
});

// 启动轮播
const startBannerRotation = () => {
  setInterval(() => {
    let nextIndex = (activeBannerIndex.value + 1) % bannerData.length;
    setActiveBanner(nextIndex);
  }, 3000);
};

// 获取图标样式
const getFeatureIconClass = (index) => {
  const classes = [
    'bg-gradient-to-r from-[#FF7E5F] to-[#FF9800]',
    'bg-gradient-to-r from-[#4facfe] to-[#2196F3]',
    'bg-gradient-to-r from-[#43e97b] to-[#4CAF50]',
    'bg-gradient-to-r from-[#a6c0fe] to-[#3F51B5]',
    'bg-gradient-to-r from-[#d299c2] to-[#9C27B0]'
  ];
  return classes[index] || '';
};

// 点击功能模块
const handleFeatureClick = (feature) => {
  Taro.showToast({ title: `进入${feature.title}板块` });
};

// 查看所有任务
const viewAllTasks = () => {
  Taro.showToast({ title: '即将跳转到任务列表页面' });
};

// 点击导航项
const handleNavItem = (item) => {
  Taro.showToast({ title: `进入${item.text}页面` });
};

// 点击搜索
const performSearch = () => {
  Taro.showToast({ title: '执行搜索操作' });
};

// 切换底部导航
const selectFooterBtn = (index) => {
  footerButtons.forEach((btn, i) => {
    btn.active = i === index;
  });
};
</script>

<style scoped></style>